<template>
  <div
    class="markdown-content"
    v-html="renderedMarkdown"
    @mouseup.stop="highlight"
  ></div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { marked } from "marked";

// 原始 Markdown 文本（含 ==高亮== 语法）
const markdownText = ref(`这是一段普通文本，但是饭卡十大科技和发空间啊士大夫看见爱上咖啡机哈师大会计法哈十大科技发货喀什地方和，阿萨==这部分需要高亮==，还有==另一段高亮内容==。`);

// 自定义渲染器，处理 == 高亮语法
const renderer = new marked.Renderer();
// 重写文本解析规则：替换 ==xxx== 为 <span class="highlight">xxx</span>
const renderHighlight = (text) => {
  // 使用正则匹配 == 包裹的内容（非贪婪匹配）
  return text.text.replace(/==(.*?)==/g, '<span class="highlight">$1</span>');
};
const highlight = (e) => {
  // console.log(window.getSelection().toString());

  // // 获取选中的文本
  const selection = window.getSelection();
  if (!selection.rangeCount) return;
  const range = selection.getRangeAt(0);
  const selectedText = selection.toString().trim();
  if (!selectedText) return;
  console.log(selectedText, range);

  //   // 1. 视觉标注：用 span 包裹选中区域
  //   const markEl = document.createElement('span');
  //   markEl.className = 'highlight-annotation';
  //   markEl.dataset.type = 'highlight';
  //   // 存储原始文本（用于反向转换）
  //   markEl.dataset.text = selectedText;
  //   range.surroundContents(markEl);

  // 2. 记录标注位置（在原始文本中的索引）
  const startIndex = markdownText.value.indexOf(selectedText);
  console.log(
    startIndex,
    startIndex + selectedText.length,
    "startIndex + selectedText.length"
  );
  // 用 == 包裹高亮内容
  const markedText = `==${selectedText}==`;
  // 替换原始文本中的对应部分
  markdownText.value =
    markdownText.value.substring(0, startIndex) +
    markedText +
    markdownText.value.substring(startIndex + selectedText.length);
  console.log(markdownText.value, "markdownText.value");

  // if (startIndex !== -1) {
  //   annotations.value.push({
  //     type: 'highlight',
  //     text: selectedText,
  //     start: startIndex,
  //     end: startIndex + selectedText.length
  //   });
  //     // 生成带标注的 Markdown
  //     generateMarkedMd();
};
onMounted(() => {
  console.log(213123);

  // 覆盖 marked 的文本渲染方法
});
renderer.text = renderHighlight;

// 计算属性：解析 Markdown 并处理高亮
const renderedMarkdown = computed(() => {
  return marked(markdownText.value, { renderer });
});
</script>

<style scoped>
/* 高亮样式 */
.markdown-content :deep(.highlight) {
  background-color: #fff3cd; /* 浅黄色背景 */
  padding: 0 2px;
  border-radius: 2px;
}
</style>
